<template>
  <div>
    <span>setting</span>
    <br>
    <a v-bind:[attributeName]="url"> 我是链接 </a>  <!--绑定-->
    <a v-bind:[name]="url"> 我是链接 </a>
    <button v-on:[click]="getName">点我</button>

    <!-- 外层div套内层button,触发内层时间会冒泡，使用.stop 阻止冒泡，-->
    <!--<div class="inner" @click="div1Handler">-->
    <!--  <input type="button" value="戳他" @click.stop="btnHandler">-->
    <!--</div>-->
    <br>
    <a v-on:click.once="doThis">点我啊</a>

    <!--======================================-->
    <div @click="warn($event)">点击事件</div>

    <!-- 阻止单击事件继续传播 -->
    <a @lick.stop>阻止单击事件继续传播</a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="">修饰符可以串联</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>只有修饰符</form>

    <div v-on:scroll.passive="onSubmit">aaa</div>

    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button v-on:click.ctrl="onPageDown">A</button>

    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button v-on:click.ctrl.exact="onPageDown">A</button>

    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button v-on:click.exact="onPageDown">A</button>


    <input type="radio" v-model="pick" v-bind:value="name">

    <br>
    <!--这个lazy绑定方式，在input失去焦点或者回车后才会更新-->
    <input v-model.lazy="msg">
    <div>{{ msg }}</div>
    <br>
    <input v-model.number="msg">

    <br>
    <item-input
      placeholder="输入"
      @TestsetName="changeName"
      :htmlUrl="url"
      v-model="name">
      <h3>插槽！</h3>
    </item-input>

    <!--插槽-->
    <!--后备内容：在子组件里的slot里定义默认的内容。
                如果不传插槽数据，显示默认的内容
                如果传覆盖默认内容-->
    <item-slot>
      <!--<section>-->
      <!--  &lt;!&ndash;父级模板里的所有内容都是在父级作用域中编译的-->
      <!--  子模板里的所有内容都是在子作用域中编译的。&ndash;&gt;-->
      <!--  <header>-->
      <!--    来了 {{  headerData  }}-->
      <!--  </header>-->
      <!--</section>-->

      <!--注意 v-slot 只能添加在 <template> 上-->
      <template v-slot="content">
        我是content具名插槽
        {{ content.user }}
      </template>

      <template v-slot="{todo}">
        <span v-if="todo.isComplete">✓</span>
        {{ todo.text }}
      </template>
      <!--作用域插槽：把属性传递给父组件-->
    </item-slot>


  </div>
</template>

<script>
import ItemInput from "@/components/item-input";
import ItemSlot from "@/components/item-slot";

export default {
  name: "setting",
  components: {ItemSlot, ItemInput},
  data() {
    return {
      attributeName: 'href',
      url: 'www.baidu.com',
      click: 'click', // 动态设置属性
      name: '',
      pick: '',
      msg: '',
      headerData: '9000',
      // user:'ed8888'
    }
  },
  methods: {
    getName() {
      alert('name')
    },
    doThis() {
      alert('doThis')
    },
    warn(e) {
      console.log(e.preventDefault)
      // e.style.color = 'red'
    },
    onPageDown() {
      console.log('出发滚动')
    },
    changeName(val) {
      console.log('我是孙子组件的数据' + '' + val)
      this.name = val;
    },

  }

}
</script>

<style scoped>

</style>
